<!DOCTYPE html>
<html lang="cn">

<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width,initial-scale=1.0">
   <meta http-equiv="X-UA-Compatible" content="ie=edge">
   <!-- <script src="http://apps.bdimg.com/libs/vue/1.0.8/vue.min.js"></script> -->
   <title><%- data.title %></title>
   <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
   <link rel="stylesheet" href="css/bootstrap.min.3.7.css">;
   <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
   <link rel="stylesheet" href="css/index.css" class="">
   <script src="js/bootstrap.min.js"></script>
   <!-- <script src="http://120.79.139.240:300/socket.io/socket.io.js"></script> -->
   <!-- <script src="http://127.0.0.1:300/socket.io/socket.io.js"></script> -->
   <script src="/ws/socket.io.js"></script>
   <script src="js/flexible.js"></script>
</head>

<body>
   <div class="container wrapper bg-primary">
      <h3>websocket 聊天系统 后台admin(或客服)</h3>
      <div class="container-fluid content-main  div-group ">
         <div class="left col-lg-8 col-md-8 col-xs-8 bg-primary">
            <ul class="top " id="top">
               <li class="server  "><label class="bg-info"><span class="glyphicon glyphicon-cloud"> </span> 你好</label></li>
            </ul>
            <section class="bottom bg-success">
               <div type="text" class="send bg-success">
                  <textarea name="send" id="send" cols="300" rows="100"></textarea>
               </div>
               <p class="bg-info">按回车"Enter"键或单击按钮发送，Ctrl+Enter 换行
                  <button onclick="send()" class="btn btn-success">全部发送</button>
                  <!-- <button onclick="send2('')" class="btn btn-success">定向发送</button> -->
               </p>
            </section>
         </div>

         <div class="right col-lg-4 col-md-4 col-xs-4 bg-danger">
            <p class="bg-info"><img id="userIMG"
                  src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2111934553,104502141&fm=26&gp=0.jpg"
                  alt=""></p>
            <p class="bg-info"> <span class="glyphicon glyphicon-user">用户:</span><span>jekig</span></p>
            <p class="bg-info"><span class="glyphicon glyphicon-phone">号码:</span><span>531556397</span></p>
         </div>

      </div>
      <audio id="audio" autoplay="auto" src="http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9478.wav"></audio>

   </div>


   <script>



      //   动态设置用户头像宽度
      var imgW = $("#userIMG").innerWidth();
      //   alert(imgW)
      $("#userIMG").css({ "height": imgW + "px" })


      //连接ws服务器
      const options = {
         path: "/ws"
      };
      let token = 'ABCDEF123456';
      //连接ws服务器
      const socket = io("http://127.0.0.1:300/?" + token, options);
      // const socket = io("http://120.79.139.240:300");


      const audio = document.getElementById('audio')
      //设置监听来自于服务器推送的事件
      socket.on("pusll-message-event", (data) => {
         var getdata = data.data.msg
         console.log('接受到的数据：', data);
         var getMsgStr = " <li class='server'><label class='bg-info'><span class='glyphicon glyphicon-cloud'> </span>" + getdata + "</label></li>"
         $(".top").append(getMsgStr);
         $("#audio").attr("src", "http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9478.wav");
         audio.play()
      })


    

      window.onload = function () {
      };
      
     //接收来之服务器推送的用户列表
      socket.on("pusll-server-admin", (data) => {
         console.log('接受到的数据：', data, data.userList);
         var getdata = data.data.msg
         var getMsgStr = " <li class='server'>";
         $(".top").append(getMsgStr + "<label class='bg-info'><span class='glyphicon glyphicon-cloud'> </span>" + getdata + ":</label></li>");

         for (var i = 0; i < data.userList.length; i++) {
            var getlist="<button onclick='send2(this.innerHTML)'class='btn btn-success id'alt='可以选中发送' title='单击用户ID号可以发送到指定用户'>"+data.userList[i]+'<strong>'+data.userNB[i]+'</strong>'+"</button></li>";
            $(".top").append(getMsgStr + getlist);
         }

         //播放接收音乐
         $("#audio").attr("src", "http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9478.wav");
         audio.play()
         setScorll()
      })




     //获取代发内容
      var txt = document.getElementById("send");
      //send发送消息的方法 群发
      function send() {
         $("#audio").attr("src", "http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9411.wav")
         audio.play()
         //触发一个服务器端绑定的事件(自定义事件)（功能就是用于推送发送过去的数据给到其他用户）
         var text = txt.value || "内容为空";
         var senddata = {
            id: "",
            msg: text,
            adminID: 0,
            toall:true
         };
         socket.emit("send-message-event", senddata);
         var senMsgStr = "<li class='clinet' ><label class='bg-success'><span class='glyphicon glyphicon-user'> </span>" + text + "</label></li>"
         $(".top").append(senMsgStr);
         $("#send").val("")
         setScorll()
      }


      // send();//首次运行一次表明是admin
      var senddata = {
         id: "",
         msg: '前台管理员身份确认',
         adminID: true
      };
      socket.emit("admin-to-server", senddata);



      //send发送消息的方法 指定用户发
      function send2(value) {
         //触发一个服务器端绑定的事件(自定义事件)（功能就是用于推送发送过去的数据给到其他用户）
         var text = txt.value;
         var value2 = value.split("<")[0];
         // alert(value2)
         var senddata = {
            id: value2,
            msg: text
         };
         if (text != "" && value2 != "") {
            socket.emit("send-message-selectUser", senddata); //定向发送
            var senMsgStr = "<li class='clinet' ><label class='bg-success'><span class='glyphicon glyphicon-user'> </span>" + text + "</label></li>"
            $(".top").append(senMsgStr);
            $("#send").val("")
            $("#audio").attr("src", "http://downsc.chinaz.net/Files/DownLoad/sound1/201711/9411.wav")
            audio.play()
         } else {
            alert("发送内容和用户ID(单击客户列表编号发送)不能为空")
         }
         setScorll()
      }


      // tui退出事件
      socket.on('disconnect', (res) => {
         console.log('退出事件')
         socket.emit('disconnect', { msg: "退出" })
      })




      //设置滚动条之下最低
     function  setScorll(){
         var topH=$('#top')[0].scrollHeight  //获取滚动条高度一定要在元素下标第一个
         var topH2=$('#top').height()
         $('#top').scrollTop(topH)
         console.log("topH:",topH,topH2)
      }

   </script>

</body>

</html>